<template>
	<view class="content">
		<mine-head :title="headTitle" :background="background" :borderBottom="false"></mine-head>
		<view class="con">
			<view class="title-box _df _jb _ac">
				<view class="title">
					积分任务
				</view>
				<view class="all _df _jc _ac" @click="toview">
					<image src="@/static/img/mine/jfIcon1.png" mode=""></image>
					<span>{{userInteger}}</span>
					<u-icon class="ml15" name="arrow-right" color="rgba(255,255,255,0.5)" size="26"></u-icon>
				</view>
			</view>
			<view class="box1">
				<view class="title">
					每日签到
				</view>
				<view class="list mb30">
					<view class="item" v-for="(item,index) in signinList" :key="index + 1">
						<view class="day" :class="item.isActive ? 'active' : ''">
							{{item.week}}
						</view>
						<view class="icon _df _jc _ac">
							<image class="img1" v-if="item.sign" src="@/static/img/mine/jfIcon2.png" mode=""></image>
							<image class="img2" v-else-if="!item.sign && item.day >= today" src="@/static/img/mine/jfIcon1.png" mode=""></image>
							<image class="img3" v-else-if="!item.sign && item.day < today" src="@/static/img/mine/unSign.png" mode=""></image>
						</view>
						<view class="num">
							+{{item.integral}}
						</view>
					</view>
				</view>
				<view class="btn1 _df _jc _ac" @click="signin" :class="{btnH:page.sign}">
					{{btnText}}
				</view>
			</view>
			<view class="box1">
				<view class="title" style="margin-bottom: 10rpx;">
					做任务领奖励
				</view>
				<view class="list2 mb30">
					<view class="item _df _ac _jb" v-for="(item,index) in taskList" :key="index" v-if="item.type != 0">
						<view class="icon _df _jc _ac">
							<image v-if="item.type == 0" src="@/static/img/mine/jfIcon5.png" mode=""></image>
							<image v-else-if="item.type == 1" src="@/static/img/mine/jfIcon5.png" mode=""></image>
							<image v-else-if="item.type == 2" src="@/static/img/mine/jfIcon3.png" mode=""></image>
							<image v-else-if="item.type == 3" src="@/static/img/mine/jfIcon4.png" mode=""></image>
						</view>
						<view class="text">
							<view class="name">
								{{item.name}}
							</view>
							<view class="info _df">
								<image src="@/static/img/mine/jfIcon1.png" mode=""></image>
								+{{item.integerData}}
							</view>
						</view>
						<u-tag v-if="item.userCountData == 0" text="去完成" @click="doTask(item)" bg-color="#F0F3FB" color="#5573D3" shape="circle"  />
						<u-tag v-else-if="item.userCountData > 0 && item.userCountData < item.countData" @click="doTask(item)" :text="item.userCountData + '/' +item.countData" shape="circle"  />
						<u-tag v-else-if="item.userCountData >= item.countData && item.userTaskId == null" text="领取" @click="getaward(item)" shape="circle" type="warning" />
						<u-tag v-else-if="item.userTaskId != null" text="已领取" shape="circle" type="success" />
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{
					backgroundColor: 'transparent'
				},
				headTitle:'',
				btnText:'立即签到',
				signinList:[],
				taskList:[],
				isSignin:false,
				today:0,
				page:{},
				userInteger:0
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.getUserSign()
			this.getUserTask()
		},
		methods:{
			toview(){
				let _url = '/pages/tabbar/mine/integral/integral-use'
				uni.navigateTo({
					url:_url
				})
			},
			getWeek(e){
			    let newNum = e;
			    let week =
			      newNum === 7
			        ? "日"
			        : newNum === 1
			        ? "一"
			        : newNum === 2
			        ? "二"
			        : newNum === 3
			        ? "三"
			        : newNum === 4
			        ? "四"
			        : newNum === 5
			        ? "五"
			        : newNum === 6
			        ? "六"
			        : "";
			        return week
			},
			//获取签到记录
			getUserSign(){
				let that = this
				uni.$_get({
					url: "getUserSign",
					that: that,
					success(res) {
						let data = res.data.times;
						that.userInteger = res.data.userInteger
						that.page = {
							day:res.data.day,
							integer:res.data.integer,
							sign:res.data.sign,
						}
						if(res.code == 0){
							let date = new Date();
							let today = 0
							let dayOfWeek = date.getDay();
							that.today = dayOfWeek
							let arr = []
							data.map((item,index) =>{
								let obj ={
									day:item.day,
									week:that.getWeek(item.day),
									date:item.date,
									sign:item.sign,
									integral:item.integral,
									isActive:item.day==dayOfWeek?true:false
								}
								arr.push(obj)
							})
							if(!that.page.sign){
								that.btnText = '今日已签到，明日再来'
							}else{
								that.btnText = '立即签到'
							}
							that.signinList = arr
							
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			getUserTask(){
				let that = this
				uni.$_get({
					url: "getUserTask",
					that: that,
					success(res) {
						let data = res.data;
						if(res.code == 0){
							let arr = []
							// data.map((item,index) =>{
							// 	let obj ={
							// 		day:that.getWeek(item.day),
							// 		date:item.date,
							// 		sign:item.sign,
							// 		integral:item.integral
							// 	}
							// 	arr.push(obj)
							// })
							that.taskList = data
							
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			getaward(e){
				let that = this
				let p = {
					taskId:e.id,
					type:e.type,
					integerData:e.integerData,
				}
				uni.$_post({
					url: "get-receive",
					that: that,
					params: p,
					success(res) {
						if(res.code == 0){
							uni.showToast({
								title: '领取成功！',
								duration: 1500,
								icon:'success'
							});
							that.getUserSign()
							that.getUserTask()
						}else{
							uni.showToast({
								title: '领取失败',
								duration: 2000,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: '领取失败',
							duration: 1000,
							icon:'error'
						});	
						console.log(err)
					},
				});
			},
			signin(){
				if(!this.page.sign) return
				let that = this
				let p = {
					day:this.page.day,
					integer:this.page.integer,
				}
				uni.$_post({
					url: "userSign",
					that: that,
					params: p,
					success(res) {
						if(res.code == 0){
							uni.showToast({
								title: '签到成功！',
								duration: 1500,
								icon:'success'
							});
							that.getUserSign()
						}else{
							uni.showToast({
								title: '签到失败',
								duration: 2000,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: '添加失败',
							duration: 1000,
							icon:'error'
						});	
						console.log(err)
					},
				});
				
			},
			doTask(e){
				let _url = ''
				if(e.type == 1){
					_url = '/pages/tabbar/music/index?type=1'
					uni.reLaunch({
						url:_url
					})
				}else if(e.type == 2){
					_url = '/pages/tabbar/music/index?type=2'
					uni.reLaunch({
						url:_url
					})
				}else if(e.type == 3){
					_url = '/pages/comA/breathe/breathe'
					uni.navigateTo({
						url:_url
					})
				}
			}
		},
		onPageScroll(e) {
			if(e.scrollTop>0){
				this.isScroll = true
				this.background = {
					backgroundImage: 'linear-gradient(45deg, #eadefa, #afbef8)'
				}
				this.headTitle = '积分任务'
			}else{
				this.background = {
					backgroundColor: 'transparent'
				}
				this.headTitle = ''
			}
		 }
	}
</script>

<style lang="scss" scoped>
.content{
	min-height: 100vh;
	background: url(@/static/img/mine/jfBg.png) no-repeat center / 100% auto;
	.con{
		padding: 20rpx 0;
		.title-box{
			margin-bottom: 50rpx;
			.title{
				font-size: 60rpx;
				font-family: $uni-font-family-Bold;
				color: #000;
			}
			.all{
				width: 200rpx;
				height: 76rpx;
				background: rgba(0,0,0,0.2);
				border-radius: 38rpx;
				font-size: 30rpx;
				font-family: $uni-font-family-Heavy;
				color: #fff;
				image{
					width: 45rpx;
					height: 42rpx;
					margin: 0 15rpx 0 0;
				}
			}
		}
		.box1{
			background: #ffffff;
			border-radius: 50rpx;
			padding: 45rpx 30rpx 40rpx;
			margin-bottom: 30rpx;
			.title{
				font-size: 34rpx;
				font-family: $uni-font-family-Heavy;
				color: #000;
				margin-bottom: 30rpx;
			}
			.list{
				display: flex;
				.item{
					text-align: center;
					flex: 1;
					background: #ffffff;
					border: 1rpx solid #c0cae7;
					border-radius: 15rpx;
					overflow: hidden;
					padding-bottom: 10rpx;
					margin-right: 12rpx;
					.day{
						height: 40rpx;
						line-height: 40rpx;
						background: #f0f3fb;
						font-size: 20rpx;
						font-family: $uni-font-family-Bold;
						color: #5875D4;
					}
					.active{
						background-color: #698efd;
						color: #f0f3fb;
					}
					.icon{
						height: 68rpx;
						.img1{
							width: 42rpx;
							height: 42rpx;
						}
						.img2{
							width: 45rpx;
							height: 42rpx;
						}
						.img3{
							width: 48rpx;
							height: 48rpx;
						}
					}
					.num{
						font-size: 24rpx;
						font-family: $uni-font-family-Bold;
						color: #111;
					}
				}
				.item:last-child{
					margin-right: 0;
				}
			}
			.btn1{
				width: 530rpx;
				height: 75rpx;
				background: #b7c4ec;
				border-radius: 38rpx;
				font-size: 28rpx;
				font-family: $uni-font-family-Bold;
				color: #fff;
				margin: 0 auto;
			}
			.btnH{
				background: #7089DA;
			}
			.list2{
				
				.item{
					padding: 40rpx 0;
					border-bottom: 1rpx solid #eee;
					.icon{
						width: 84rpx;
						height: 84rpx;
						margin-right: 15rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.text{
						margin-right: auto;
						padding-right: 30rpx;
						.name{
							font-size: 30rpx;
							font-family: $uni-font-family-Bold;
							color: #1B1B1B;
							margin-bottom: 5rpx;
						}
						.info{
							font-size: 26rpx;
							font-family: $uni-font-family-Heavy;
							color: #111;
							image{
								width: 32rpx;
								height: 30rpx;
								margin-right: 4rpx;
							}
						}
					}
					.btn{
						width: 130rpx;
						height: 52rpx;
						background: #F0F3FB;
						border-radius: 26rpx;
						font-size: 28rpx;
						font-family: $uni-font-family-Bold;
						color: #5573D3;
					}
				}
				.item:last-child{
					border-bottom: none;
				}
			}
		}
	}
}
</style>
